<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img width="64" height="64" :src="seller.avatar" alt="">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{ seller.name }}</span>
        </div>
        <div class="description">
          {{ seller.description }}/{{ seller.deliveryTime }}分钟送达
        </div>
        <div v-if="seller.supports" class="support0">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
        </div>
      <div v-if="seller.supports" @click="showDetail" class="support-count">
        <span class="count">{{ seller.supports.length }}个</span>
        <i class="icon-keyboard_arrow_right"></i>
      </div>
      </div>
    <div class="bulletin-wrapper" @click="showDetail"><span class="icon bulletin"></span><span class="bulletin-text">{{ seller.bulletin }}</span><span class="icon-keyboard_arrow_right"></span></div>
    <div class="background">
      <img :src="seller.avatar" width="100%">
    </div>
    <transition name="fade">
    <div v-show="detailShow" class="detail">
      <div class="detail-wrapper clearfix">
        <div class="detail-content">
          <h1 class="name">{{ seller.name }}</h1>
          <div class="star-wrapper">
            <star :size="48" :score="seller.score"/>
          </div>
          <div class="sellTitle">
            <div class="line"></div>
            <div class="text">优惠信息</div>
            <div class="line"></div>
          </div>
          <div class="sellMessages">
            <div v-for="item in seller.supports" :key="item.type" class="messageItem">
              <span class="icon" :class="classMap[item.type]"></span>
              <span class="text">{{ item.description }}</span>
            </div>
          </div>
          <div class="sellerBulletin">
            <div class="line"></div>
            <div class="text">商家公告</div>
            <div class="line"></div>
          </div>
          <div class="bulletinMessage"><div>{{ seller.bulletin }}</div></div>
        </div>
      </div>
      <div class="detail-close" @click="closeDetail">
        <i class="icon-close"></i>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
import star from '../star/star'
export default {
  props: {
    seller: {
    }
  },
  data () {
    return {
      aaa1: 'decrease',
      detailShow: false
    }
  },
  methods: {
    showDetail () {
      this.detailShow = true
    },
    closeDetail () {
      this.detailShow = false
    }
  },
  components: {
    star
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/styles/style.css';
.clearfix{
  display: inline-block;
  &after{
    display: block;
    content: '.';
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
 }
}
@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
  .brand {
    background-image: url('./brand@2x.png')
  }
  .icon.decrease{
    background-image: url('./decrease_1@2x.png')
  }
  .icon.discount{
    background-image: url('./discount_1@2x.png')
  }
  .icon.guarantee{
    background-image: url('./guarantee_1@2x.png')
  }
  .icon.invoice{
    background-image: url('./invoice_1@2x.png')
  }
  .icon.special{
    background-image: url('./special_1@2x.png')
  }
  .icon.bulletin{
    background-image: url('./bulletin@2x.png')
  }
  // .star48-half{
  //   background-image: url('./star48_half@2x.png')
  // }
  // .star48-off{
  //   background-image: url('./star48_off@2x.png')
  // }
  // .star48-on{
  //   background-image: url('./star48_on@2x.png')
  // }
}
@media screen and (-webkit-min-device-pixel-ratio: 3.0) {
  .brand {
    background-image: url('./brand@3x.png')
  }
  .icon.decrease{
    background-image: url('./decrease_1@3x.png')
  }
  .icon.discount{
    background-image: url('./discount_1@3x.png')
  }
  .icon.guarantee{
    background-image: url('./guarantee_1@3x.png')
  }
  .icon.invoice{
    background-image: url('./invoice_1@3x.png')
  }
  .icon.special{
    background-image: url('./special_1@3x.png')
  }
  .icon.bulletin{
    background-image: url('./bulletin@3x.png')
  }
}
.header{
  position:relative;
  background: rgba(7,17,27,0.5);
  .background{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  filter: blur(10px)
}
}
.content-wrapper{
  position: relative;
  padding: 24px 12px 18px 24px;
  font-size: 0px;
  .avatar{
    display: inline-block;
    vertical-align: top;
    img{
      border-radius: 2px;
    }
  }
  .content{
    margin-left: 16px;
    display: inline-block;
    .title{
      margin: 2px 0 8px 0;
      .brand{
        width: 30px;
        height: 18px;
        display: inline-block;
        background-size: 30px 18px;
        background-repeat: no-repeat;
        vertical-align: top;
      }
      .name{
        margin-left: 6px;
        font-size: 16px;
        color: white;
        font-weight: bold;
        line-height: 18px;
      }
    }
    .description{
      margin-bottom: 10px;
      font-size: 12px;
      color: white;
      font-weight: 200;
      line-height: 12px;
    }
    .support0{
      margin-bottom: 2px;
      .icon{
        display: inline-block;
        width: 12px;
        height: 12px;
        background-size:12px 12px;
        background-repeat: no-repeat;
        vertical-align: top;
      }
      .text{
        margin-left: 4px;
        font-size: 10px;
        color: white;
        font-weight: 200;
        line-height: 12px;
      }
    }
  }
  .support-count{
    position:absolute;
    right: 12px;
    height: 24px;
    bottom:14px;
    padding: 0 8px;
    border-radius: 14px;
    background: rgba(0,0,0,0.2);
    text-align: center;
    line-height: 24px;
    font-weight: 200;
    color: white;
    .count{
      vertical-align: top;
      font-size: 10px;
    }
    .icon-keyboard_arrow_right{
      margin-left: 2px;
      line-height: 24px;
      font-size: 10px;
    }
  }
}
.bulletin-wrapper{
  position: relative;
  height: 28px;
  line-height: 28px;
  padding:0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  background: rgba(7,17,27,0.2);
  .icon.bulletin{
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 22px 12px;
    width: 22px;
    height: 12px;
    vertical-align: top;
    margin-top: 8px;
  }
  .bulletin-text{
    font-size:10px;
    margin:0 4px;
    vertical-align: top;
  }
  .icon-keyboard_arrow_right{
    position: absolute;
    font-size: 10px;
    right: 12px;
    top: 8px;
  }
}
.fade-enter-active, .fade-leave-active{
  transition: opacity .5s
}
.fade-enter,.fade-leave-to{
  opacity: 0
}
.detail{
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: auto;
  z-index: 666;
  background: rgba(7,17,27,0.8);
  backdrop-filter: blur(10px);
  // filter: blur(10px);
  .detail-wrapper{
    min-height: 100%;
    width: 100%;
    .detail-content{
      margin-top: 64px;
      padding-bottom: 64px;
      .name{
        font-size: 16px;
        font-weight: 700;
        color: white;
        line-height: 16px;
        text-align: center;
      }
      .star-wrapper{
        margin-top: 16px;
        text-align: center;
        padding: 2px 0;
      }
      .sellTitle{
        display: flex;
        width: 80%;
        margin: 28px auto 24px auto;
        .line{
          flex: 1;
          position: relative;
          top: -6px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2)
        }
        .text{
          padding:0 12px;
          font-size: 14px;
          color: white;
        }
      }
      .sellMessages{
          width: 80%;
          margin: 0 auto;
          .messageItem{
            margin-bottom: 12px;
            &:last-of-type{
              margin: 0;
            }
          }
          .icon{
            margin-left: 12px;
            margin-right: 6px;
            display: inline-block;
            width: 16px;
            height: 16px;
            background-size: 16px 16px;
            vertical-align: top;
          }
          .text{
            color:white;
            font-size: 12px;
            font-weight: 200;
            line-height:16px;
            vertical-align: top;
          }
        }
      .sellerBulletin{
        display: flex;
        width: 80%;
        margin: 28px auto 24px auto;
        .line{
          flex: 1;
          position: relative;
          top: -6px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2)
        }
        .text{
          padding:0 12px;
          font-size: 14px;
          color: white;
        }
      }
      .bulletinMessage{
        width: 80%;
        margin: 0 auto;
        div{
          padding: 0 12px;
          font-size: 12px;
          font-weight: 200;
          color: white;
          line-height: 24px;
        }
      }
    }
  }
  .detail-close{
    position: relative;
    margin: -64px auto 0;
    height: 32px;
    width: 32px;
    margin-bottom: 32px;
    font-size: 32px;
    color: rgba(255,255,255,0.5);
    clear: both;
  }
}
</style>
